<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="childFormVisible"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="mt-dialog"
      @close="hide"
    >
      <el-form
        v-if="action !== 'delete'"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="40px"
        style="width: 80%; margin-left:10%;"
      >
        <el-form-item label="名称">
          <el-tag v-if="disabled" type="info">{{ temp.name }}</el-tag>
          <el-input v-else v-model="temp.name" type="textarea" />
        </el-form-item>
      </el-form>
      <div v-if="showBtn" slot="footer" class="dialog-footer" align="center">
        <el-button v-if="action === 'delete'" type="danger" @click="confirm">确认</el-button>
        <el-button v-else type="primary" @click="confirm">确认</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Post, Put, Delete } from '@/api/erp/elicink/catalog'

export default {
  name: 'Catalog',
  props: ['model', 'action', 'dialogTitle', 'dialogFormVisible'],
  data() {
    return {
      showBtn: this.action !== 'view',
      disabled: false,
      temp: {},
      childFormVisible: this.dialogFormVisible,
      dialogWidth: ''
    }
  },
  watch: {
    dialogFormVisible(v) {
      this.childFormVisible = v

      this.showBtn = this.action !== 'view'
      switch (this.action) {
        case 'create':
          this.dialogWidth = '28%'
          this.disabled = false
          this.resetTemp()
          console.log('alert', this.temp)
          break
        case 'delete':
          this.dialogWidth = '30%'
          this.temp = this.model
          this.disabled = false
          break
        case 'edit':
          this.dialogWidth = '30%'
          this.disabled = false
          this.temp = Object.assign({}, this.model)
          break
        case 'view':
          this.dialogWidth = '28%'
          this.disabled = true
          this.temp = this.model
          break
      }
    }
  },
  methods: {
    resetTemp() {
      switch (this.action) {
        case 'create':
          this.temp = {
            name: '',
            parent_id: this.model.type === 'catalog' ? this.model.id : null,
            supplier_id: this.model.type === 'catalog' ? this.model.supplier_id : this.model.id
          }
          break
      }
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        case 'create':
          Post(this.temp).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('添加成功')
          })
          break
        case 'delete':
          Delete(_data.id).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('删除成功')
          })
          break
        case 'edit':
          Put(_data.id, {
            name: _data.name
          }).then((response) => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('更新成功')
          })
          break
      }
    },
    cancel() {
      this.childFormVisible = false
    },
    hide() {
      this.$emit('cancelDialog', false)
    },
    notify(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
  .mt-dialog >>> span.el-dialog__title {
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }
</style>
